<template>
  <div class="app-container monthlyBudget">
    <el-form :model="selectForm" ref="queryForm" :inline="true" label-width="120px">
      <el-form-item label="预算月份：">
        <el-date-picker
          v-model="selectForm.mouth"
          type="month"
          size="small"
          @change="getList"
          format="yyyy-MM"
          value-format="yyyy-MM"
          placeholder="选择月">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="战线分类：">
        <el-select v-model="selectForm.depId" placeholder="请选择" size="small"  @change="getList">
          <el-option
            v-for="item in classify"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
<!--        <el-button size="mini" type="warning" icon="el-icon-refresh" @click="allocation">自动分配</el-button>-->
        <el-button  size="mini" type="success" icon="el-icon-document-add" @click="saveBtn">保存</el-button>
        <el-button  size="mini" type="primary"  @click="daoruUp">导入上月数据</el-button>
<!--        <el-button  size="mini" type="primary" icon="el-icon-search" @click="getList">搜索</el-button>-->
      </el-form-item>
    </el-form>
    <div v-loading="loading" class="xuqiu-cent" >
      <table  cellpadding="0" cellspacing="0">
        <thead>
        <tr style="background: #F5F7FA; color: #515a6e;height: 40px;font-size: 13px;">
          <td class="name"><b>矿控费用</b> </td>
          <td class="neirong" v-for="item in mapLieArr"><b>{{item.proName}}</b> </td>
        </tr>
        </thead>
        <tr >
          <td class="name">月初始值/万 </td>
          <td class="neirong" v-for="item in mapLieArr">
            <el-input  type="number" v-model="item.mouthStart"></el-input>
          </td>
        </tr>
        <tr >
          <td class="name">月调整值/万 </td>
          <td class="neirong" v-for="item in mapLieArr">
            <el-input  type="number" v-model="item.mouthChange"></el-input>
          </td>
        </tr>
        <tr >
          <td class="name">月预算/万</td>
          <td class="neirong" v-for="item in mapLieArr">{{item.mouthChange/1+item.mouthStart/1}}</td>
        </tr>
      </table>
    </div>
    <div class="zhanxianArt" v-for="(item,index) in zxMessage" :key="index">
      <el-table  v-loading="loading" :data="item.mapLie" style="width: 100%;margin-bottom: 20px"   >
        <el-table-column property="depName" label="单位" width="100%" align="center"></el-table-column>
        <el-table-column
          align="center"
          v-for="(it,i) in item.listHang"
          :key="i"
          :label="it.name">
          <el-table-column  :property="it.mouthStart" label="月初值/万" align="center" width="150px">
            <template slot-scope="scope">
              <el-input  v-show="scope.row.type!='0'" type="number" v-model="scope.row[scope.column.property]" @change="jianting(scope.row)"></el-input>
              <span  v-show="scope.row.type=='0'">{{scope.row[scope.column.property]}}</span>
            </template>
          </el-table-column>
          <el-table-column :property="it.mouthChange" label="月调整/万" align="center" width="150px">
            <template slot-scope="scope">
              <el-input v-show="scope.row.type!='0'"  type="number" v-model="scope.row[scope.column.property]" ></el-input>
              <span v-show="scope.row.type=='0'">{{scope.row[scope.column.property]}}</span>
            </template>
          </el-table-column>
          <el-table-column :property="it.mouthSun" label="月预算/万" align="center" width="150px"></el-table-column>
        </el-table-column>
      </el-table>
    </div>




  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name: "monthlyBudget.vue",
    data(){
      return{
        zxMessage:[],
        total:0,
        mapLieArr:[],
        selectForm:{
          mouth:'',
          depId:'',
        },
        listHang: [
          {
            mouth: "正常生产",
            xunran:'qishu',
            xunranj:'jiner',

          },
          {
            mouth: "安装搬家",
            xunran:'qishu1',
            xunranj:'jiner1',

          },
          {
            mouth: "港岛维修",
            xunran:'qishu2',
            xunranj:'jiner2',

          },
        ],
        mapLie: [
          {
            id: "sdasda3434kjkddkj1",
            bunen: "部门1",
            qishu:'1',
            jiner: "2",

            qishu1:'3',
            jiner1: "4",

            qishu2:'5',
            jiner2: "6",


          },
          {
            id: "sdasda3434fgkjkkj2",
            bunen: "部门2",
            qishu:'7',
            jiner: "8",


            qishu1:'9',
            jiner1: "10",


            qishu2:'11',
            jiner2: "12",

          },
          {
            id: "sdasdasda3434kjkkj3",
            bunen: "部门3",
            qishu: "13",
            jiner: "14",


            qishu1:'15',
            jiner1: "16",

            qishu2:'17',
            jiner2: "18",

          },
          {
            id: "sdasdasda3434kjkkj4",
            bunen: "部门4",
            qishu: "19",
            jiner: "20",

            qishu1:'21',
            jiner1: "22",

            qishu2:'23',
            jiner2: "24",
          },
        ],
        kaungkong:{
          mouth:'',
          // depId:'',
        },
        classify:[],

        loading:false,
      }
    },
    created() {
      this.getZhanxian()
      var myDate = new Date();
      var yue = myDate.getMonth()+1
      if(yue<9){
        yue = '0'+yue
      }
      this.selectForm.mouth =  myDate.getFullYear()+'-'+ yue+'';


    },
    methods:{
      //导入上月数据
      daoruUp:function(){
        request({
          url: '/method/WzTeamBudget/addMouthSynchronization',
          method: 'get',
          params:this.selectForm
        }).then(response => {
          this.getList()
        });
      },
      kuangkong:function(){
        debugger
        this.kaungkong.mouth = this.selectForm.mouth
        request({
          url: '/method/WzTeamBudget/listMouthAllKK/'+this.kaungkong.mouth,
          method: 'get',
        }).then(response => {
          this.mapLieArr = response.data
          console.log('this.mapLieArr',this.mapLieArr)
        });
      },
      sanvekaung:function(){
        request({
          url: '/method/WzTeamBudget/addMouthAllKK',
          method: 'post',
          data:this.mapLieArr
        }).then(response => {

        });
      },
      //保存
      saveBtn:function(){
        this.loading = true;
        console.log(this.zxMessage)
        this.sanvekaung()
        request({
          url: '/method/WzTeamBudget/addMouthAll',
          method: 'post',
          data:this.zxMessage
        }).then(response => {
          if(response.code=='200'){
            this.$message({
              type: 'success',
              message: '保存成功!'
            });
          }
          this.getList();
        });

      },
      jianting:function(row){
        console.log(row.type)
      },
      getList(){
        this.loading = true;
        this.kuangkong()
        request({
          url: '/method/WzTeamBudget/listMouthAll',
          method: 'get',
          params:this.selectForm
        }).then(response => {
          this.loading = false;
          debugger
          this.zxMessage = response.data

          let zonghzobj={}
          var shanxuan = []
          for (var i=0;i<this.zxMessage.length;i++){//循环战线

          }
          // zonghzobj =Object.assign({}, this.zxMessage[0].mapLie[0])
          // zonghzobj.depName='总合计'
          // this.zxMessage[0].mapLie.unshift(zonghzobj)
          console.log( 'zonghzobj',zonghzobj)
        });
      },
      //获取战线
      getZhanxian:function(){
        request({
          url: '/system/dept/listFront',
          method: 'get',
        }).then(response => {
          this.classify = response.data
          this.classify.unshift({
            deptName:'全部',
            deptId:0
          })
          this.selectForm.depId =this.classify[0].deptId

          this.getList();
        });
      },
      //自动分配
      allocation(row){
        this.$confirm('确认要自动分配项目的月预算吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '分配成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },

    }
  }
</script>

<style scoped lang="scss">
  .xuqiu-cent {
    /*table,table tr th, table tr td { border:0.5px solid #cccc; }*/
  table {
    text-align: center;
    margin-bottom: 20px;
    border-collapse:collapse;
    border-spacing:0;
    border-left:1px solid #cccc;
    border-top:1px solid #cccc;
  tr {
    height: 45px;
    line-height: 45px;
    border-right:1px solid #cccc;
    border-bottom:1px solid #cccc;
    padding:5px 15px;
  }
  td{
    height: 45px;
    line-height: 45px;
    border-right:1px solid #cccc;
    border-bottom:1px solid #cccc;
    padding:5px 15px;
  }
  .name {
    width: 150px;
    color: #515a6e;
    height: 40px;
    font-size: 13px;
  }
  .neirong {
    padding-left: 15px;
    padding-right: 15px;
    color: #515a6e;
    height: 40px;
    font-size: 13px;
  }

  }

  }
  .zhanxianArt el-table {
    margin-top: 20px;
  }
</style>
